<html>
<head>
	<TITLE>オンライン会議室予約システム</TITLE>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
<script type="text/javascript">
$(document).ready(function(){
	query(1);	
	$('#record_view').hide();
	//$('#form_room').hide();
	$('#edit_form').attr('disabled',true);
	$("#description").htmlarea();
});
function query(page){
	if(checkValueBeforeSubmit()==1) return;
	$('#inform_search').html('');
	var room_id=$('#search_roomid').val();
	var room_name=$('#search_roomname').val();
	var per_page=$('#per_page').val();
	var path='room_id='+room_id+'&room_name='+room_name+'&page='+page+'&per_page='+per_page;
    $.ajax({
      	type:"POST",
      	url: "data/room/total_page.php",
      	data: path,
        async: false,
    	success: function(data) {
            //alert(data);
    		$("#totalPage").html(data);
            $('#total_row').val(data);
			load_listpage(page);			
		}
	});		 
}

function load_listpage(page){
       	    var room_id=$('#search_roomid').val();
			var room_name=$('#search_roomname').val();
			var per_page=$('#per_page').val();
			var path='room_id='+room_id+'&room_name='+room_name+'&page='+page+'&per_page='+per_page;
					//alert(path);
            $.ajax({
      			type:"POST",
      			url: "data/room/list_page.php",
      			data: path,
                async: true,
    			success: function(data) {
                    var total=$('#total_row').val();
                    if(total/per_page>1){
    				    $("#listpage_data").html(data);
                        $('#listpage').show();
                    }else {
                        $("#listpage_data").html("");
                        $('#listpage').hide();                        
                    }
                    $.ajax({
        		      	type:"POST",
        		      	url: "data/room/list_room.php",
        		      	data: path,
        		        async: true,
        		    	success: function(data) { 
        					$('#TabContentDiv').html(data);
        				}
        			});
			     }
		     }); 
    }
  function GoEndPage(){
		var total = $('#total_row').val();
		var per_page=$('#per_page').val();
		var endpage= parseInt($('#total_row').val()/$('#per_page').val());
		if( total%per_page!=0)
			endpage= endpage+1;
		//alert(endpage);
        query(endpage);
        
    }
function set_dirfile(url){
		url = url.substr(9);
		if(url!='2' && url!='0'){
			$('#txt_content_file_name').val(url);
		}
		else if(url=='0'){
			_alert('inform','ファイルのフォーマットは許可するできない');
			//$('#txt_content_file_name').focus();
		}else {
			_alert('inform','Lỗi server. Không thể upload được file.');
			//$("#txt_content_file_name").focus();
		}
	}
function open_room(id){
	//alert(id);
	//alert('aaa');
	$("#divRoomID").hide();
    $("#form_room").show();
	get_room_info(id);
	$('#insert_form').attr('disabled',true);
	$('#form_room').show();
	$('#room_name').attr('disabled',true);
	$('#price').attr('disabled',true);
	//$('#cmdBrowse').attr('disabled',true);
	$('#chair').attr('disabled',true);
	$('#description').attr('disabled',true);
}
function edit_room(id){
	get_room_info(id);
	$("#divRoomID").hide();
    $("#form_room").show();
	$('#edit_form').removeAttr('disabled');
	$('#insert_form').attr('disabled',true);
	$('#form_room').show();
	$('#room_name').removeAttr('disabled');
	$('#price').removeAttr('disabled');;
	$('#cmdBrowse').removeAttr('disabled');;
	$('#chair').removeAttr('disabled');;
	$('#description').removeAttr('disabled');
}
function get_room_info(id){
	//alert(id);
	$.getJSON("data/room/detail_room.php",'room_id='+id, function(data){ 
			//alert(data.brief);
			$('#room_id').val(data.room_id);
			$('#room_name').val(data.room_name);
			$('#price').val(data.price);
			$('#txt_content_file_name').val(data.avatar);
			$('#chair').val(data.chair);
			$("#text_description").html("<div id='text_description'><textarea id='description' style='width:100%;height:100px;'>"
			+data.description+"</textarea></div>");
			$("#description").htmlarea();
		});
}
function viewFormUpload(){
		_popup('data/room/upload_file/formUpload.php',this.id,500,300);	
}

function checkValueBeforeSubmit(){
	if(isNaN($('#search_roomid').val()) && $('#search_roomid').val()!=''){
		_alert('inform_search','roomid phải là số. Vui lòng nhập lại!');
		$('#search_roomid').focus();
		return 1;
		}

}
function checkValueBeforeInsert(){
	if(isNaN($('#price').val()) && $('#price').val()!=''){
		_alert('inform','Giá phải là số. Vui lòng nhập lại!');
		$('#price').focus();
		return 1;
		}
	if(isNaN($('#chair').val()) && $('#chair').val()!=''){
		_alert('inform','Số ghế phải là số. Vui lòng nhập lại!');
		$('#chair').focus();
		return 1;
		}

}
function insert_room(){
			if(checkValueBeforeInsert() ==1) return;
			$('#inform').html('');
			var room_name=$('#room_name').val();
			var price = $('#price').val();
			var avatar = $('#txt_content_file_name').val();
			var chair = $('#chair').val();
			var description=$("#description").val();
			var path = 'room_name='+room_name+'&price='+price+'&avatar='+avatar+'&chair='+chair+'&description='+description;
			$.ajax({
      			type:"POST",
      			url: "data/room/insert_room.php",
      			data: path,
                async: false,
    			success: function(data) {
					//alert(data);
                    if(data==0){
						_alert('inform','新しいという'+room_name+'会議室の情報を追加することができない ');
					}
					else if(data==1){
						_alert('inform','新しいという'+room_name+'会議室'+room_name+'の　情報を追加することが成功です');
						query(1);
					}else{
						_alert('inform','予想できないエラーは起こったので、もう一度おねがいします。');
					}
			     }
		     }); 
}
function delete_room(id,room_name){	
	if(!confirm("Bạn có muốn xóa phòng này trên hệ thống không?")) return;
	$.ajax({
      			type:"POST",
      			url: "data/room/delete_room.php",
      			data: "room_id="+id,
                async: false,
    			success: function(data) {
					//alert(data);
                    if(data=='TRUE'){
						_alert('inform','会議室　'+room_name+' を削除しました!');
						query(1);
					}
					else{
						_alert('inform','会議室 '+room_name+' を削除することができない!');
			     	}
				}
		     }); 	
}
function check_value_id(){
	
	if($('#room_id').val()!=''){
		$('#edit_form').removeAttr('disabled');
		$('#insert_form').attr('disabled',true);
		//alert('aaa');
	}
	else {
		//alert('bbb');
		$('#insert_form').removeAttr('disabled');
		$('#edit_form').attr('disabled',true);
	}
}
function reset_form(){
	$('#insert_form').removeAttr('disabled');
	$('#edit_form').attr('disabled',true);
	$('#form_room').show();
	$('#room_name').removeAttr('disabled');
	$('#price').removeAttr('disabled');;
	//$('#cmdBrowse').removeAttr('disabled');
	$('#chair').removeAttr('disabled');
	$('#description').removeAttr('disabled');
	$('#room_id').val('');
	$('#room_name').val('');
	$('#price').val('');
	$('#chair').val('');
	$('#txt_content_file_name').val('');
	$("#text_description").html("<div id='text_description'><textarea id='description' style='width:100%;height:100px;'></textarea></div>");
	$("#description").htmlarea();
}
function update_room(){
			//alert('aaa');
			if(checkValueBeforeInsert() ==1) return;
			$('#inform').html('');
			var room_name=$('#room_name').val();
			var price = $('#price').val();
			var avatar = $('#txt_content_file_name').val();
			var chair = $('#chair').val();
			var description=$("#description").val();
			var room_id=$('#room_id').val();
			description = description.replace(/"/g,'\\"');
			var path = 'room_name='+room_name+'&price='+price+'&avatar='+avatar+'&chair='+chair+'&description='+description+'&room_id='+room_id;
			//alert(path);
			$.ajax({
      			type:"POST",
      			url: "data/room/edit_room.php",
      			data: path,
                async: false,
    			success: function(data) {
					//alert(data);
                    if(data==0){
						_alert('inform',room_name+'という会議室の情報を編成するできない。！');
					}
					else if(data==1){
						_alert('inform',room_name+'という会議室の情報を編成することは成功です。！');
						query(1);
					}else{
						_alert('inform','予想できないエラーは起こったので、もう一度おねがいします。');
					}
			     }
		     }); 
}
function book_room(room_id){
	var path='room_id='+room_id;
	$.ajax({
		type:"POST",
		url: "data/room/book_room.php",
		data: path,
	    async: false,
		success: function(data) {
			$("#divRoomID").html(data);
            $("#form_room").hide();
			 $("#divRoomID").show();
	     }
	 }); 
}    

</script>
</head>
<body >
	<div id="tabheader" class="title" style="width:99.4%">会議室管理 -> 会議室情報管理 </div>
    <table class="ctable" width="100%">
    	<tr>
	    <td width="30%" style="padding-right:10px" align="right">会議室ID</td>
        <td width="15%"><input type="text" class="cinput" id="search_roomid"></td>
        <td width="10%" style="padding-right:10px" align="right">会議室名</td>
        <td width="15%"><input type="text" class="cinput" id="search_roomname"></td>
        <td width="30%" align="left">
        	<input value="Tìm kiếm" type="button" onClick="query(1)" style="width:80px;" class="cbutton" />
	        </td>
        </tr>
        <tr><td colspan="5"><div id='inform_search'></td></tr>
    </table>
	 <div id='TabContentDiv' class="tabContent"></div>
	 <div id="phantrang">
        	<table class="ctable"  width="100%" >
            <tr align="center" height="10px;">
	            <td align="left" width="20%">総計
	              <div id="totalPage" style="display:inline;"></div><input type="hidden" id='total_row'>
	              室</td>
                <td width="60%" style="display:inline;">
                  <div id="listpage_data" style="border-style:0px;display: inline; clear:both;">
                </div>
              </td>
              <td width="20%"><td>
                <td align="right" width="20%" style="display:inline;" id='record_view'>各ページのレコード数<select id="per_page" onChange="query(1)">
                    <option value="5">5 レコード</option>
                </select></td>
             </tr>
         </table>   
	  
	 </div>
	 <div style="width:100%;" id="divRoomID" class="cdiv">
	</div>	
	 <div id='form_room'>	
	 <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0 class="ctable" id="tbdsRoom">
      <TBODY>
          <TR>
            <TD width="25%" height="30px" style="padding-left:100px;">会議室ID<font color="#FF0000">*</font> : </TD>
            <TD style="VERTICAL-ALIGN: top; PADDING-TOP: 4px" width="25%">
            <input id="room_id" class=cinput type="text" style="WIDTH: 100%" disabled ></TD>
            <TD width="25%" style="padding-left:100px;">会議室名<font color="#FF0000">* </font>:</TD>
        <TD width="25%"><input id="room_name" class=cinput type="text" style="WIDTH: 100%" ></TD></TR>
          <TR height="30px">
            <TD style="padding-left:100px;">価格<font color="#FF0000">&nbsp;*</font> : </TD>
            <TD>
                <input id="price"  class=cinput type="text" style="WIDTH:100%" ></TD>
            <TD style="padding-left:100px;">個人のイメージ </TD>
            <TD width="25%" ><input name="CONTENT_FILE_NAME" type="text" id="txt_content_file_name" style="width:70%" class="cinput" readonly>
        	  				<input type="button" id="cmdBrowse" class="cbutton" value="Browse.." onClick="viewFormUpload()"> 
            </TD>
        </TR>
    
          <TR>
            <TD style="padding-left:100px;">席定数<font color="#FF0000">*</font> : </TD>
            <TD >
                <input style="WIDTH:100%" class="cinput" type="text" id='chair'/>
            </TD>
            <TD style="padding-left:100px;">&nbsp;</TD>
            <TD width="25%">
                </TD></TR>
            <tr>
            	 <TD style="padding-left:100px;">詳細情報<font color="#FF0000">*</font> :
            	</TD>
            	<TD colspan="3">
                <div id='text_description'><textarea id="description" style="width:100%;height:100px;">
                </textarea></div></TD>
            </tr>
            <tr>
                 <TD colspan="4" align="center"><div id='inform'></div></TD>
            </tr>
            <tr height="30px">
                <TD colspan="4" align="center">
                <INPUT id='insert_form' style="width:90px"  type=button value="追加する" onClick="insert_room()" class="cbutton">&nbsp;
                <INPUT id='edit_form' style="width:90px"  type=button value="編成する" onClick="update_room()" class="cbutton">&nbsp;
                <INPUT id='reset_form' style="width:90px"  type=button value="すべて消す" onClick="reset_form()" class="cbutton">
                </TD>
            </tr>
      </TABLE>		 
      </div>   
</body>
</html>